<!--
 * @Author: Bennent_G
 * @Date: 2024-12-23 16:14:13
 * @LastEditTime: 2025-01-17 10:24:43
 * @Description:
-->
<template>
	<a-layout-header class="sub-header">
		<a-tag color="geekblue" v-for="item in menuTabCache" :key="item" @click="handleClickTag(item)"
			:class="{ 'tag-active': item.path === currentRoute.path }">
			{{ item.title }}
			<template #icon>
				<CloseCircleOutlined @click.stop="handleCloseTag(item)" />
			</template>
		</a-tag>
	</a-layout-header>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from "vue-router";
import { CloseCircleOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from "pinia";
import { useMenuStore } from "@/stores";
import useRouteHook from '@/hooks/admin/useRouteHook';

interface Menu {
	[key: string]: any;
}

defineComponent({ name: "BaseLayoutSubHeader" });

const menuStore = useMenuStore();
const { menuTabCache } = storeToRefs(menuStore);
const { removeMenuCache } = menuStore;

// 类tab切换
const router = useRouter();
const { currentRoute } = useRouteHook();
const handleClickTag = (item: Menu) => {
	router.push(item.path);
};
const handleCloseTag = (item: Menu) => {
	if (item.path === currentRoute.value.path) {
		const prevMenu = menuTabCache.value[menuTabCache.value.length - 2];
		router.push(`${prevMenu?.path || '/admin/welcome'}`);
	}
	removeMenuCache(item);
};
</script>

<style scoped lang="scss">
.sub-header {
	height: 40px;
	background: var(--base-background-color);
	border-top: 1px solid var(--base-border-color);
	border-bottom: 1px solid var(--base-border-color);
	display: flex;
	align-items: flex-end;
	padding-inline: 4px;

	:deep(.ant-tag) {
		display: inline-flex;
		flex-direction: row-reverse;
		box-sizing: border-box;
		height: 32px;
		align-items: center;
		border: none;
		background-color: transparent;
		padding: 0 16px;
		font-size: 14px;
		max-width: 240px;
		overflow: hidden;
		transition: all 0.3s linear;
		cursor: pointer;

		.anticon+span {
			margin-inline-start: 0px;
		}

		.anticon-close-circle {
			// display: v-bind(showCloseTag);
			margin-left: 6px;
			position: relative;
			// top: 1px;
			font-size: 12px;

			&:hover {
				// color: #1677ff;
			}
		}

		&:hover {
			// background-color: rgba(0, 0, 0, .04);
		}
	}

	.tag-active {
		// color: #646cff;
		// background-color: rgba(100, 108, 255, .4);
		// color: #fff;
	}
}
</style>
